<template>
  <div class="etccard_cnt">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>ETC卡</p>
       <p></p>
     </header>
     <div class="card_cnt">
       <ul>
         <li>
           <span>姓名：</span>
           <span>红红漂流</span>
         </li>
         <li>
           <span>车牌号码：</span>
           <span>鲁AKT123</span>
         </li>
         <li>
           <span>ETC卡号：</span>
           <span class="black">78965345780976</span>
         </li>
       </ul>
     </div>
    
     <div class="btn"><input type="text" value="下一步"></div>
    
  </div>
</template>

<script>
export default {
  name: 'check_dress',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.etccard_cnt{
  height: 100%;
  /* background: #f2f2f2; */
  .font(26,#797979);
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  } 
  .card_cnt {
    ul {
    width: 92%;
    margin: auto;
    .black {
      color: #000;
    }  
      li {
        
        .line-height(84);
        .border-bottom(2,solid,#dedede);
        .font(30,#333);
      }
    }
  }
  .btn {
    width: 92%;
    margin: auto;
    .margin-top(104);
    input {
      width: 100%;
      text-align: center;
      .px2rem(height,78);
      .font(32,#fff);
      /* background: #4aba80; */
      background: #ccc;
      border: none;
    }
  }
}
</style>
